<template>
  <div class="page-header-index-wide">
    <a-form layout="inline">
      <a-row :gutter="48">
        <div >
          <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
            <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
              <a-card :bordered="false" title="线上热门搜索" :style="{ height: '100%' }">
                <a-row :gutter="68">
                  <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px' }">
                    <span style="font-size: 20px">订单编号：{{pushSearch.orderNumber}}</span>
                  </a-col>
                </a-row>
                <a-row :gutter="68">
                  <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px' }">
                    <span style="font-size: 20px">状态：{{pushSearch.orderStatus}}</span>
                  </a-col>
                </a-row>
                <a-row :gutter="68">
                  <a-col :xs="24" :sm="24" :style="{ marginBottom: ' 24px' }">
                    <span style="font-size: 20px">投放时间：{{pushSearch.putTime}}</span>
                  </a-col>
                </a-row>
                <a-row :gutter="68">
                  <a-col :xs="24" :sm="24" :style="{ marginBottom: ' 24px' }">
                    <span style="font-size: 20px">终端数量：{{pushSearch.terminalNum}} 台</span>
                  </a-col>
                </a-row>
                <a-row :gutter="68">
                  <a-col :xs="24" :sm="24" :style="{ marginBottom: ' 24px' }">
                    <span style="font-size: 20px">城市：{{pushSearch.city}}</span>
                  </a-col>
                </a-row>
                <a-row :gutter="68">
                  <a-col :xs="24" :sm="24" :style="{ marginBottom: ' 24px' }">
                    <span style="font-size: 20px">播放时间：{{pushSearch.playTime}}</span>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
              <a-card title="在线流量图" :style="{ height: '100%' }">
                <div ref="echartRef" id="echartTwo" class="echartBox"></div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-row>
      <a-row :gutter="48">
        <span>-----</span>
      </a-row>
      <a-row :gutter="48">
        <a-card :bordered="false" :body-style="{ padding: '0' }">
          <div class="salesCard">
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
              <div class="extra-wrapper" slot="tabBarExtraContent">
                <a-range-picker :style="{ width: '230px' }" @change="onChange"/>
              </div>
              <a-tab-pane tab="监播汇总" key="1">
                <s-table
                  ref="table"
                  :columns="columns"
                  :data="loadData"
                  :alert="options.alert"
                  :rowKey="record => record.id"
                  :rowSelection="options.rowSelection"
                >
                  <span slot="action" slot-scope="text, record">
                    <!--          <a v-if="hasPerm('pushManage:edit')" @click="$refs.editForm.edit(record)">编辑</a>-->
                    <!--          <a-divider type="vertical" v-if="hasPerm('pushManage:edit') & hasPerm('pushManage:delete')"/>-->
                    <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
                      <a>删除</a>
                    </a-popconfirm>
                  </span>
                </s-table>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-card>
      </a-row>
    </a-form>
  </div>
</template>
<script>
// import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea,
  STable,
  XDown
} from '@/components'
import { getDetailByMangerId } from '@/api/modular/system/pushSearchManage'
import * as echarts from 'echarts'
import { monitoringGatherPage, monitoringGatherDelete, getByDate } from '@/api/modular/system/monitoringGatherManage'

export default {
  components: {
    XDown,
    STable,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },

  data() {
    return {
      loading: true,
      // 搜索用户数
      columns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'gatherData'
        },
        {
          title: '播放台数',
          align: 'center',
          dataIndex: 'gatherNum'
        },
        {
          title: '播放次数',
          align: 'center',
          dataIndex: 'gatherSize'
        },
        {
          title: '观看人数',
          align: 'center',
          dataIndex: 'gatherPerson'
        },
        {
          title: '总观看人数',
          align: 'center',
          dataIndex: 'gatherAllPerson'
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      managerId: 0,
      loadData: parameter => {
        parameter.managerId = this.managerId
        return monitoringGatherPage(Object.assign(parameter, this.queryParam)).then(res => {
          return res.data
        })
      },
      pushSearch: {},
      visible: false,
      xAxisData: [],
      yAxisData: [],
      options: {
        // alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        // rowSelection: {
        //   selectedRowKeys: this.selectedRowKeys,
        //   onChange: this.onSelectChange
        // }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChartInfo(this.managerId).then(() => {
        this.initEchartTwo()
      })
    })
  },
  methods: {
    initEchartTwo() {
      const echartTwo = this.$refs.echartRef // document.getElementById('echartTwo') //
      const myChart = echarts.init(echartTwo)
      const option = {
        xAxis: {
          type: 'category',
          data: this.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.yAxisData,
            type: 'line'
          }
        ]
      }
      myChart.setOption(option)
    },
    singleDelete(record) {
      // const param = [{ 'id': record.id }]
      console.log('删除成功信息', record)
      // this.monitoringGatherDelete(param)
    },
    monitoringGatherDelete (record) {
      console.log('执行删除信息')
      monitoringGatherDelete(record).then((res) => {
        if (res.success) {
          this.$message.success('删除成功')
          this.$refs.table.clearRefreshSelected()
        } else {
          this.$message.error('删除失败') // + res.message
        }
      })
    },
    onChange(date, dateString) {
      console.log(date, dateString)
    },
    initChartInfo(id) {
      const param = { 'managerId': id }
      return new Promise((resolve, reject) => {
        getByDate(param).then((res) => {
          this.xAxisData = res.data.dateList
          this.yAxisData = res.data.gatherDataList
          console.log('res:', res)
          resolve()
        })
      })
    },
    searchEdit(id) {
      console.log('id:', id)
      this.visible = true
      const param = { 'managerId': id }
      getDetailByMangerId(param).then((res) => {
        this.pushSearch = res.data
      })
    }
  },
  created() {
    this.managerId = this.$route.query.manageInfo
    console.log(JSON.stringify(this.managerId))
    this.searchEdit(this.managerId)
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>
<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;
  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}
.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
  min-height: 300px;
  max-height: 800px;
}
.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}
.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.echartBox {
  //width: 100%;
  height: 300px;
  overflow: visible; /* 确保内容不会被裁剪 */
}
</style>
